<!DOCTYPE HTML>
<html>
	<head>
		<title>Asteroid Game by 4pandK | Home :: 4pandk</title>
		<link href="web/css/style.css" rel='stylesheet' type='text/css' />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
		</script>
		<!----webfonts---->
		<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
		<!----//webfonts---->
		<!---script---->
		<script src="web/js/jquery.min.js"></script>
		<!---//script---->
		<!-----768px-menu----->
		<link type="text/css" rel="stylesheet" href="web/css/jquery.mmenu.all.css" />
		<script type="text/javascript" src="web/js/jquery.mmenu.js"></script>
			<script type="text/javascript">
				//	The menu on the left
				$(function() {
					$('nav#menu-left').mmenu();
				});
		</script>
		<!-----//768px-menu----->
		 <!---strat-slider---->
	    <link rel="stylesheet" type="text/css" href="web/css/style2.css" />
		<script type="text/javascript" src="web/js/modernizr.custom.28468.js"></script>
		<!---//strat-slider---->
	</head>
	<body>
		<!----start-wrap---->
		<!------start-768px-menu---->
			<div id="page">
					<div id="header">
						<a class="navicon" href="#menu-left"> </a>
					</div>
					<nav id="menu-left">
						<ul>
							<li><a href="#about">About</a></li>
							<li><a href="#services">Services</a></li>
							<li><a href="#news">News</a></li>
							<li><a href="#contact">Contact</a></li>
						</ul>
					</nav>
			</div>
		<!------start-768px-menu---->
			<!----start-header---->
			<div class="header" id="move-top">
				<div class="wrap">
				<div class="header-left">
					<!----start-logo---->
					<div class="logo">
						<a href="index.html"><img src="web/images/logo.png" title="wildflat" /> </a>
					</div>
					<!----//End-logo---->
				</div>
				<div class="header-right">
					<!----start-top-nav---->
					<div class="top-nav">
						<ul>
							<li><a href="#about">About</a></li>
							<li><a href="#services">Services</a></li>
							<li><a href="#news">News</a></li>
							<li><a href="#contact">Contact</a></li>
						</ul>
					</div>
					<!----//End-top-nav---->
					<!----start-search-box--->
					<div class="search">
						<div class="search-box">
							<div id="sb-search" class="sb-search">
								<form>
									<input class="sb-search-input" placeholder="Enter your search term..." type="search" name="search" id="search">
									<input class="sb-search-submit" type="submit" value="">
									<span class="sb-icon-search"> </span>
								</form>
							</div>
						</div>
						<!----search-scripts---->
						<script src="web/js/modernizr.custom.js"></script>
						<script src="web/js/classie.js"></script>
						<script src="web/js/uisearch.js"></script>
						<script>
							new UISearch( document.getElementById( 'sb-search' ) );
						</script>
						<!----//search-scripts---->
					</div>
					</div>
					<!----//End-search-box--->
					<div class="clear"> </div>
				</div>
				<div class="clear"> </div>
			</div>
			<!----//End-header---->
			<!---- start-slider---->
			<div class="slider">
				<!--End-top-nav---->
				<!---start-da-slider----->
				<div id="da-slider" class="da-slider">
				<div class="da-slide">
					<label><span> </span></label>
					<h2>4PANDK IS HERE TO INSPIRE</h2>
					<p>LOOK THROUGH THE PERFECT</p>
					<i><a href="#about"> </a></i>
					<small><a href="#about">scroll to see the entire site</a></small>
				</div>
				<div class="da-slide">
					<label><span> </span></label>
					<h2>TAKE A BITE OF THAT DELICIOUS</h2>
					<p>DONT WASTE THE MOMENT</p>
					<i><a href="#about"> </a></i>
					<small><a href="#about">scroll to see the entire site</a></small>
				</div>
				<div class="da-slide">
					<label><span> </span></label>
					<h2>ONLY BOLD AND CLEAN IDEAS</h2>
					<p>FOR OUR CLIENTS WITH LOVE</p>
					<i><a href="#about"> </a></i>
					<small><a href="#about">scroll to see the entire site</a></small>
				</div>
				<nav class="da-arrows">
					<span class="da-arrows-prev"></span>
					<span class="da-arrows-next"></span>
				</nav>
			</div>
			<script type="text/javascript" src="web/js/jquery.cslider.js"></script>
			<script type="text/javascript">
				$(function() {
				
					$('#da-slider').cslider({
						autoplay	: true,
						bgincrement	: 450
					});
				
				});
			</script>
				<!---//End-da-slider----->
			</div>
			<!---- //End-slider---->
			<!---start-works---->
			<!---image-hover-effects---->
			 <script src="web/js/hover.zoom.js"></script>
						  <script>
					        $(function() {
					            $('.pink').hoverZoom({
					                overlay: true, // false to turn off (default true)
					                overlayColor: '#51A3C8', // overlay background color
					                overlayOpacity: 0.7, // overlay opacity
					                zoom: 0, // amount to zoom (px)
					                speed: 300 // speed of the hover
					            });
					            
					            
					        }); 
			    		</script>
		
			<!----start-about---->
			<div class="about" id="about">
				<div class="wrap">
					<div class="head">
						<span> </span>
						<h3>About Asteroid Game</h3>
					</div>
					<div class="about-grids">
						<div class="about-grid">
							<h3>ACCESSABILITY</h3>
							<p>You able to play this web app on every device that you have under your hand! Everything is allowed. NO exceptions. Just one, if you have a free time forget it.</p>
						</div>
						<div class="about-grid">
							<h3>IMPLEMENTATION</h3>
							<p>Future technologies for life! Get in touch with new era of smartphones and logic. You well be inspear of architecture of nova systems and creations of human.</p>
						</div>
						<div class="about-grid">
							<h3>FEAUTURES</h3>
							<p>Incredible specieffects of that game. But be careful to not miss that reason. You can only feel that playing this amazing game by your self. Catch that moment. </p>
						</div>
						<div class="clear"> </div>
					</div>
					<div class="clear"> </div>
				</div>
			</div>
			<!----//End-about---->
			<!----start-services---->
			<div class="services" id="services">
				<div class="wrap">
					<div class="head">
						<span> </span>
						<h3>Asteroid Game Services</h3>
					</div>
					<div class="services-grids">
						<div class="services-grid">
							<div class="services-grid-left">
								<span class="s-icon1"> </span>
							</div>
							<div class="services-grid-right">
								<h4>WEB APP</h4>
								<p>You able to play this web app on every device that you have under your hand! Everything is allowed. NO exceptions. Just one, if you have a free time forget it. Now is only for games. Be on the future wave with us and yout device!</p>
							</div>
						</div>
						<div class="services-grid">
							<div class="services-grid-left">
								<span class="s-icon2"> </span>
							</div>
							<div class="services-grid-right">
								<h4>Structure</h4>
								<p>Future technologies for life! Get in touch with new era of smartphones and logic. You well be inspear of architecture of nova systems and creations of human. Be able to full fill your life of inspires and imagination.</p>
							</div>
						</div>
						<div class="services-grid">
							<div class="services-grid-left">
								<span class="s-icon3"> </span>
							</div>
							<div class="services-grid-right">
								<h4>UI design</h4>
								<p>Take a look and be surprised for things you will be watching douring the tour. Keep you eyes open to not miss some piece of creativeness of our desiners and developers. Because no one is want to miss a thing. </p>
							</div>
						</div>
						<div class="services-grid">
							<div class="services-grid-left">
								<span class="s-icon4"> </span>
							</div>
							<div class="services-grid-right">
								<h4>Video</h4>
								<p>Incredible specieffects of that game. 3d is not more cool that than 2d unreal life-designed game. But be careful to not miss that reason. You can only feel that playing this amazing game by your self. So take a look and Subscribe!</p>
							</div>
						</div>
						<div class="clear"> </div>
					</div>
				</div>
				<div class="services-bg">
				
				</div>
			</div>
			<!----//End-services---->
			<!---start-purches-it---->
			<div class="purches-it">
				<h5>Like this?</h5>
				<a href="game/index.html">START IT NOW</a>
			</div>
			<!---//End-purches-it---->
			<!--- start-latest-news---->
			<div class="latest-news" id="news">
				<div class="wrap">
					<div class="head">
						<span> </span>
						<h3>Latest News</h3>
					</div>
					<!----news-grid-scroller---->
					<script type="text/javascript" src="web/js/jquery.flexisel.js"></script>
					<script type="text/javascript">
					$(window).load(function() {
					    $("#flexiselDemo3").flexisel({
					        visibleItems: 3,
					        animationSpeed: 1000,
					        autoPlay: true,
					        autoPlaySpeed: 3000,            
					        pauseOnHover: true,
					        enableResponsiveBreakpoints: true,
					        responsiveBreakpoints: { 
					            portrait: { 
					                changePoint:480,
					                visibleItems: 1
					            }, 
					            landscape: { 
					                changePoint:640,
					                visibleItems: 2
					            },
					            tablet: { 
					                changePoint:768,
					                visibleItems: 3
					            }
					        }
					    });
					});
					</script>
					<ul id="flexiselDemo3">
					    <li>
					    	<div class="latest-news-grid">
					    		<h3>30/<span>04</span></h3>
					    		<p>And cut! Almost everything is done and we start prepair the game for the final deploying! Greetings my friends! So take a look and GET STARTED!</p>
					    	</div>
					    </li>
					    <li>
					    	<div class="latest-news-grid">
					    		<h3>24/<span>04</span></h3>
					    		<p>Second prototype is done. Main functionality is working fine and we just need to give a breath to the server side. God, give us strenght to finish that!</p>
					    	</div>
					    </li>
					    <li>
					    	<div class="latest-news-grid">
					    		<h3>03/<span>04</span></h3>
					    		<p>Base has filled! Starting to prepair prototypes. Ogh, that paper work. But we will take that. Release is coming soon. After the end of the term!</p>
					    	</div>
					    </li>
					    <li>
					    	<div class="latest-news-grid">
					    		<h3>19/<span>03</span></h3>
					    		<p>Hello! We are glad to present you for new cross-browser game. In the near future we start to work that and give you a best quality game to spend you break time.</p>
					    	</div>
					    </li>
					</ul>  
					<div class="clear"> </div>
					<!----//news-grid-scroller---->
					<!----latest-news-bottom-border---->
					<div class="bottom-border">
						<span> </span>
					</div>
					<!----//latest-news-bottom-border---->
				</div>
			</div>
			<!--- //End-latest-news---->
			<!----start-contact---->
			<div class="contact" id="contact">
				<div class="wrap">
					<div class="contact-left">
						<div class="contact-head">
								<span> </span>
								<h3>Contact US</h3>
						</div>
						<form>
							<div class="form-left">
								<input type="text" placeholder="Name" required />
								<input type="text" placeholder="Email" required />
								<input type="text" placeholder="Phone" required />
							</div>
							<div class="form-right">
								<textarea rows="2" cols="70" onfocus="if(this.value == 'Comment') this.value='';" onblur="if(this.value == '') this.value='Comment';" >Comment</textarea>
							</div>
							<div class="clear"> </div>
							<input type="submit" value="Send latter" />
							<div class="clear"> </div>
						</form>
					</div>
					<div class="contact-right">
						<div class="contact-head">
								<span> </span>
								<h3>Best Players</h3>
						</div>
						<div class="flicker-grids">
							<ul>
								<li><a href="#"><img src="web/images/f1.jpg" alt="" /></a></li>
								<li><a href="#"><img src="web/images/f2.jpg" alt="" /></a></li>
								<li><a href="#"><img src="web/images/f3.jpg" alt="" /></a></li>
								<li><a href="#"><img src="web/images/f4.jpg" alt="" /></a></li>
								<li><a href="#"><img src="web/images/f5.jpg" alt="" /></a></li>
								<li><a href="#"><img src="web/images/f6.jpg" alt="" /></a></li>
							</ul>
						</div>
					</div>
					<div class="clear"> </div>
				</div>
			</div>
			<!----//End-contact---->
			<!---- start-footer---->
			<div class="footer">
				<div class="wrap"> 
				<div class="footer-left">
					<h2>FANKS FOR WATCHING, <span>We hope you enjoyed it</span></h2>
				</div>
				<div class="footer-right">
					<ul>
						<li><a class="youtube" href="#"><span> </span></a></li>
						<li><a class="skye" href="#"><span> </span></a></li>
						<li><a class="flicker" href="#"><span> </span></a></li>
						<li><a class="rss" href="#"><span> </span></a></li>
						<li><a class="twitter" href="#"><span> </span></a></li>
						<li><a class="dribbble" href="#"><span> </span></a></li>
						<div class="clear"> </div>
					</ul>
				</div>
				<div class="clear"> </div>
				</div>
			</div>
			<!---- //End-footer---->
			<!----start-copy-right---->
			<div class="copy-right">
				<div class="wrap">
					<p>Powered by <a href="#">Me</a></p>
					<!---scrolling---->
					<script type="text/javascript" src="web/js/move-top.js"></script>
					<script type="text/javascript">
							$(function() {
							  $('a[href*=#]:not([href=#])').click(function() {
							    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
						
							      var target = $(this.hash);
							      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
							      if (target.length) {
							        $('html,body').animate({
							          scrollTop: target.offset().top
							        }, 1000);
							        return false;
							      }
							    }
							  });
							});
					</script>
					<!---//scrolling---->
					<script type="text/javascript">
							$(document).ready(function() {
								/*
								var defaults = {
						  			containerID: 'toTop', // fading element id
									containerHoverID: 'toTopHover', // fading element hover id
									scrollSpeed: 1200,
									easingType: 'linear' 
						 		};
								*/
								
								$().UItoTop({ easingType: 'easeOutQuart' });
								
							});
						</script>
				    <a href="#move-top" id="toTop" style="display: block;"><span id="toTopHover" style="opacity: 1;"> </span></a>
				</div>
			</div>
			<!----//End-copy-right---->
		<!----//End-wrap---->
	</body>
</html>

